<template>
  <div>
    <uv-navbar class=""  autoBack placeholder bgColor="#ffffff" title="取消订单" />
    <div class="p1756190002">
      <div class="pb30">
        <div class="p1756190057">确定要取消订单吗?</div>
        <div class="fz28 pt20" style="color: #898989">本次取消无需扣费</div>
      </div>
      <div style="color: #036EB8" class="fz26  pb30">查看取消规则</div>
      <div class="p1756192105  pt30 ">
        <div class="p1756191456 fac jcc" style="width: 100%;">
          <uv-button size="mini" text="" @click="cancelOrderTap">
            <div class="fz36 p1756193077" style="color: #fff;">确认取消</div>
          </uv-button>
        </div>
        <div style="border: 2rpx solid #C9CACA;" class="p1756191291  fac jcc" @click="backTap">暂不取消</div>
      </div>
    </div>
  </div>

</template>
<script>
  import { cancelOrderDuringService } from '@/api/index.js'
  export default {

    data() {
      return {
        routeQuery: {}
      }
    },

    onLoad(options) {
      if (options) this.routeQuery = options
    },
    methods: {
      backTap() {
        uni.navigateBack({ url: ('/pages-worker/order?id=' + this.routeQuery.id) });
      },
      cancelOrderTap() {
        uni.showLoading({ title: '取消中', mask: true })
        cancelOrderDuringService({ reason_cancellation_id: Number(this.routeQuery.rcd), order_id: Number(this.routeQuery.id) }).then(res => {
          uni.hideLoading()
          if (res.code === 200) {
      uni.hideLoading()
            uni.navigateBack({ url: ('/pages-worker/order?id=' + this.routeQuery.id) });
          }
        })
      }
    }
  }
</script>
<style>
  page {
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
@import './common.scss';
  .fz36 {
    font-size: 36rpx;
  }

  .p1756191291 {
    width: calc(100% - 4rpx);
    border-radius: 10rpx;
    height: 90rpx;
    max-height: 90rpx;
    line-height: 90rpx;
    font-weight: 500;
    font-size: 36rpx;
    overflow: hidden;
    text-align: center;
    margin-top: 30rpx;
  }

  .p1756190002 {
    padding: 50rpx 30rpx 60rpx 30rpx;

    .p1756190057 {
      font-weight: 700;
      font-size: 46rpx;

    }
  }


  .p1756191048 {
    padding: 20rpx 30rpx;
    border-radius: 20rpx;
    background-color: #F7F8F8;

  }

  .p1756191456 {
    border-radius: 10rpx;
    height: 94rpx;
    max-height: 94rpx;
    line-height: 94rpx;
    font-weight: 500;
    font-size: 36rpx;
    overflow: hidden;
    text-align: center;
    color: #fff;
  }


  .uv-button.uv-button--mini {
    .p1756193077 {
      width: inherit !important;
      height: inherit !important;
      background-color: #E60012;
    }
  }

  .uv-button.uv-button--mini.uv-button--disabled {
    .p1756193077 {
      background-color: #C9CACA !important;
      color: #fff;
      border: 2rpx solid #C9CACA !important;
    }
  }
</style>